<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Your Custom Page</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #D9D919; /* 深蓝色背景 */
            color: #ffffff; /* 白色文本 */
            font-family: Arial, sans-serif; /* 设置字体 */
        }

        .header-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            position: relative; /* 为了确保内容不超出背景图像 */
            z-index: 1; /* 提高内容层级 */
        }

        .navbar {
            width: 100%;
            height: 30%;
        }

        .logo img {
            max-width: 100%;
            height: auto;
        }

        .navigation ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        .navigation li {
            margin-right: 20px;
        }

        .navigation a {
            text-decoration: none;
            color: #ffffff;
            font-weight: bold;
            font-size: 16px;
            transition: color 0.3s ease; /* 添加颜色过渡效果 */
        }

        .navigation a:hover {
            color: #FFD700; /* 鼠标悬停时的颜色 */
        }

        .content-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: flex-start;
            margin-top: 20px; /* 调整上边距 */
            padding: 20px; /* 内容区域内边距 */
        }

        .text-container {
            width: 60%; /* 调整文本容器的宽度 */
            margin-right: 20px; /* 调整右边距 */
        }

        .text-container h2 {
            color: #00274E; /* 标题颜色 */
        }

        .text-container p {
            color: #666; /* 段落文本颜色 */
        }

        .image-container,
        .video-container,
        .additional-image-container {
            width: 30%;
            margin-bottom: 20px; 
            border-radius: 8px; 
            overflow: hidden;
        }

        .image-container img,
        .additional-image-container img {
            width: 100%;
            height: auto;
        }

        .video-container video {
            width: 100%;
            height: auto;
        }

        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                align-items: flex-start;
            }

            .text-container,
            .image-container,
            .additional-image-container,
            .video-container {
                width: 100%; 
                margin-right: 0; 
            }

            .navbar {
                margin-top: 20px;
            }
        }
    </style>
</head>
<body>

<div class="header-container">

    <header class="navbar">
        <div class="logo">
            <img src="../image/logo.png" alt="Website Logo">
        </div>
        <nav class="navigation">
            <ul>
                <li><a href="../index.html">Home</a></li>
                <li><a href="../web/Introduction.html">Introduction</a></li>
                <li><a href="../web/players.html">Players</a></li>
                <li><a href="../web/news.html">News</a></li>
                <li><a href="../web/data.html">Data</a></li>
            </ul>
        </nav>
    </header>

</div>

<div class="content-container">

    <div class="text-container">
        <h2>11.23 GSW:115 VS PHX:123</h2>
        <p>北京时间11月23日，勇士后卫克里斯-保罗在社交媒体上对太阳队表示了感谢。
            在勇士客场与太阳的比赛赛后，克里斯-保罗在社交媒体上表示:“感谢你们让我在菲尼克斯度过了三年精彩的时光。很抱歉我今晚提前离开了。
            保罗在本场比赛中因技术犯规被罚下场，全场只出战了17分钟。
            保罗在2020-2023年为太阳队效力，效力期间共为太阳出战了194场常规赛，场均得到16.9分4.9篮板10.7助攻。</p>
        <p>北京时间11月23日，勇士主教练史蒂夫-科尔接受了ClutchPoints记者的采访。
            在勇士115-123负于太阳的比赛中，克里斯-保罗被驱逐出场。对此科尔表示:“这件事情对我们影响很大。显然我们需要克里斯-保罗。我们这场没有德雷蒙德-格林，没有加里-佩顿，我们已经人手不足，克里斯也知道这一点。这很不幸。但和之前一样，这种事对我来说更重要的是要看到我们的球员始终在一起战斗。他们的关系非常好，这是一个很棒的团队，他们真的很喜欢彼此。一支能够起并肩战斗的球队你是能感觉到的。他们会沟通会带着力量打球，会打得很顺畅。这种球队是在良好的沟通下打球，你可以听到每个人都在防守端说话。”</p>
    </div>

    <div class="image-container">
        <img src="../image/D1.jpg" alt="Placeholder Image">
    </div>

    <div class="video-container">
        <video controls>
            <source src="../image/GAME.mp4.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>

    <div class="additional-image-container">
        <img src="../image/D2.jpg" alt="Additional Placeholder Image">
    </div>

</div>

</body>
</html>
